<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/own.css" />
		<style type="text/css">
			.mui-col-xs-4,
			.mui-col-xs-8 {
				height: 100%;
				overflow-y: auto;
			}
			
			.mui-segmented-control .mui-control-item {
				line-height: 40px;
				width: 100%;
				text-align: center;
				padding-right: 10px;
			}
			
			.mui-segmented-control .mui-control-item img {
				width: 25px;
				vertical-align: middle;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				background-color: #F9F9F9;
				color: #41cea9;
			}
			
			.mui-table-view-cell {
				padding: 8px;
				text-align: center;
				background-color: #F9F9F9;
			}
			
			.mui-table-view:after,
			.mui-table-view-cell:after {
				height: 0px;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item,
			.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active {
				border-bottom: none;
			}
			
			.mui-control-content {
				font-size: 0.9em;
			}
		</style>
	</head>

	<body>
		<div class="mui-content mui-row mui-fullscreen">
			<div class="mui-col-xs-4" style="background: white;">
				<div id="categoryStair" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
				</div>
			</div>
			<div id="categoryMovers" class="mui-col-xs-8" style="background: #F9F9F9;">
				<div id="category3387" class="mui-control-content mui-active">

				</div>
			</div>
		</div>

		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/own.js"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: false
			})
			var categoryWebview; //这个页面的实例
			var categoryStair = []; //第一级category数据存储
			var categoryMovers = []; //第二级category数据存储
			var categoryHtml = []; //html数组
			var categoryStairHtml; //categoryStair的div
			var categoryMoversHtml; //categoryMovers的div
			var parentWebView; //父类
			mui.plusReady(function() {
				
					setSubWebviewBounce('none');
					categoryWebview = plus.webview.currentWebview();
					categoryStairHtml = document.getElementById('categoryStair');
					categoryMoversHtml = document.getElementById('categoryMovers');
					parentWebView = plus.webview.currentWebview().parent();
					//添加点击第一级和第二级的监听事件
					addCategoryEvent();
					//初始化第一级数据并且设置html
					initFirstCategoryData();
					//初始化第二级数据并且设置html
					initSecondCategoryData(0);
				})
				//添加点击第一级和第二级的监听事件
			function addCategoryEvent() {
				//为第一级分类监听点击事件
				mui('#categoryStair').on('tap', '.mui-control-item', function() {
					var item = this;
					get_sub_categoryByParentID(item.getAttribute('href').substring(9));
				});
				//监听第二级分类的点击事件
				//监听事件中mui选择的时候最好不要有多个被选择的对象，也就是＃categoryMovers最好只表示一个节点。也就是最好用id
				mui('#categoryMovers').on('tap', '.mui-table-view-cell a', function() {
					var categoryA = this;
					var id = 'category/category-detail-new-needtem.html';
					var title = categoryA.innerText;
					var href = 'category/category-detail-new-needtem.html';
					var categoryID = categoryA.getAttribute('href');
					//弹入分类商品列表
					pushWebView({
						webType: 'newWebview_First',
						id: id,
						href: href,
						aniShow: getaniShow(),
						title: title,
						isBars: false,
						barsIcon: '',
						extendOptions: {categoryID:categoryID}
					})
				});
			}
			//初始化第一级数据并且设置html
			function initFirstCategoryData() {
				for (var i = 0; i < 10; i++) {
					var item = {};
					item.id = i;
					item.name = '分类' + i;
					item.imageurl = '../img/category.png';
					categoryStair[i] = item;
					var html = '<a class="mui-control-item" href="#category' + categoryStair[i].id + '"><span><img src="' + categoryStair[i].imageurl + '"/>&nbsp&nbsp</span>' + categoryStair[i].name + '</a>';
					categoryHtml.push(html);
				}
				//设置categorystairhtml的innerhtml
				categoryStairHtml.innerHTML = categoryHtml.join('');
				//设置初始化第一个的mui-active
				document.querySelector('.mui-control-item').classList.add('mui-active');
				//重置categoryHtml数组
				categoryHtml = [];
			}
			//初始化第二级数据并且设置html
			function initSecondCategoryData(parentId) {
				var categorysub = {};
				categorysub.parentID = parentId;
				categorysubarray = [];
				for (var i = 0; i < 20; i++) {
					var subitem = {};
					subitem.categoryID = i;
					subitem.productName = parentId +'子分类' + i;
					categorysubarray[i] = subitem;
				}
				categorysub.categorysubarray = categorysubarray;
				//如果已经存在这个id的信息就不在加入
				var item = get_categoryMoversStateByID(parentId);
				if (item && item.categorysubarray.length > 0) {
					return;
				}
				categoryMovers.push(categorysub);
				createSubCategoryHtml(categorysub);
				setCurSubCategory();
			}
			//创建二级分类的html
			function createSubCategoryHtml(categorysub) {
				var html = '<div id="category' + categorysub.parentID + '" class="mui-control-content"><ul class="mui-table-view">';
				mui.each(categorysub.categorysubarray, function(index, item) {
					html = html + '<li class="mui-table-view-cell"><a href ="' + item.categoryID + '">' + item.productName + '</a></li>';
				});
				html = html + '</ul></div>';
				console.log(html);
				categoryHtml.push(html);
				categoryMoversHtml.innerHTML = categoryHtml.join('');
			}
			//通过parentID获取下面的二级分类
			function get_sub_categoryByParentID(parentID) {
				//只有当categoryMovers这个数组中存在这个id并且这个id下面的分类数量大于0才不需要再次请求
				var item = get_categoryMoversStateByID(parentID);
				if (item && item.categorysubarray.length > 0) {
					return;
				}
				
				initSecondCategoryData(parentID);
			}
			//在完成创建二级分裂之后设置当前选中的subcategory
			function setCurSubCategory() {
				var stairslist = document.querySelectorAll('.mui-control-item');
				var moversList = document.querySelectorAll('.mui-control-content');
				var curItem;
				for (var i = 0; i < stairslist.length; i++) {
					if (stairslist[i].classList.contains('mui-active')) {
						curItem = stairslist[i];
						break;
					}
				}
				var curstairsID = curItem.getAttribute('href').substring(9);
				var showItem = null;
				for (var i = 0; i < moversList.length; i++) {
					if (moversList[i].id.substring(8) == curstairsID) {
						showItem = moversList[i];
						break;
					}
				}
				//如果现在没有content来显示 则马上请求 这个数据
				if (showItem) {
					showItem.classList.add('mui-active');
				} else {
					get_sub_categoryByParentID(curstairsID);
				}
			}

			function get_categoryMoversStateByID(parentID) {
				for (var i = 0; i < categoryMovers.length; i++) {
					if (categoryMovers[i].parentID == parentID) {
						return categoryMovers[i];
					}
				}
				return null;
			}
		</script>
	</body>

</html>